<template>
  <div>
    <!-- 动态加载的 iframe 组件 -->
    <DynamicIframe v-if="iframeUrl" :src="iframeUrl" :width="iframeWidth.value" 
                   :height="iframeHeight.value" />
    <p v-else>Loading...</p>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getChatUrl } from '@/api/chat/chat'; // 确保路径正确指向你的API服务
import DynamicIframe from '@/components/iframe/iframe.vue'; // 假设你有一个专门用于显示iframe的组件

// 初始化 iframe URL, width 和 height
const iframeUrl = ref<string | null>(null);
const iframeWidth = reactive({ value: '100%' }); // 默认宽度及其单位
const iframeHeight = reactive({ value: '100vh' }); // 默认高度及其单位

async function loadIframe() {
  try {
    const data = await getChatUrl({});
    iframeUrl.value = data;
  } catch (error) {
    console.error('Failed to fetch iframe URL:', error);
  }
}

// 页面加载时调用loadIframe函数
onMounted(() => {
  loadIframe();
});
</script>

<style scoped>
/* 可根据需求添加样式 */
</style>